<template>
  <div class="header-menu">
    <div v-if="$slots.logo" class="header-menu-logo">
      <slot name="logo"></slot>
    </div>
    <div class="header-menu-menus">
      <slot name="default"></slot>
    </div>
    <div v-if="$slots.operations" class="header-menu-operations">
      <slot name="operations"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">

defineProps({
  // logo 宽度
  logoWidth: {
    type: String,
    default: '232px'
  }
})

</script>

<style scoped lang="less">
.header-menu {
  --header-height: 100%;

  width: 100%;
  height: var(--header-height);
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--el-border-color);
  user-select: none;

  &-logo {
    min-width: v-bind(logoWidth);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-menus {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-operations {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }

}
</style>
